<template>
  <div id="message-view" style="background-color: white; height: 100vh; overflow: auto">
    <div class="title">消息</div>
    <div v-for="(message, index) in messages" :key="index" class="message-item">
      <div class="message-avatar">
        <img :src="message.senderAvatar" alt="Avatar" class="avatar-img">
      </div>
      <div class="message-content">
        <div class="message-sender">{{ message.senderName }}</div>
        <div class="message-date">{{ message.date }}</div>
        <div class="message-text">{{ message.text }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:"MessageView",
  data() {
    return {
      messages: [
        {
          senderName: "sfy的宠物店",
          senderAvatar: "https://img01.yzcdn.cn/vant/cat.jpeg",
          date: "2024-07-09",
          text: "你的订单已发货"
        },
        {
          senderName: "sfy的宠物店",
          senderAvatar: "https://img01.yzcdn.cn/vant/cat.jpeg",
          date: "2024-07-09",
          text: "你的订单已提交"
        },
        // Add more messages as needed
      ]
    };
  }
};
</script>

<style scoped>
.message-item {
  display: flex;
  margin-bottom: 15px;
  padding: 10px;
  border-bottom: 0.5px solid #ccc;
}

.message-avatar {
  margin-right: 10px;
}

.avatar-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.message-content {
  flex: 1;
}

.message-sender {
  font-weight: bold;
  margin-bottom: 5px;
}

.message-date {
  color: #888;
  font-size: 12px;
  margin-bottom: 5px;
}

.message-text {
  line-height: 1.6;
}
.title
{
  font-weight: bold;
  font-size: 20px;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 20px;
}
</style>
